<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
%>
<!DOCTYPE html>
<html lang="en">

<head>
    <title>贷款辅助平台管理系统</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <%--<link rel="stylesheet" href="static/login/bootstrap.min.css" />
    <link rel="stylesheet" href="static/login/css/camera.css" />
    <link rel="stylesheet" href="static/login/bootstrap-responsive.min.css" />
    <link rel="stylesheet" href="static/login/matrix-login.css" />
    <link href="static/login/font-awesome.css" rel="stylesheet" />
    <script type="text/javascript" src="static/js/jquery-1.5.1.min.js"></script>--%>

    <link rel="stylesheet" href="../../../../static/layer/css/layui.css" media="all"/>
    <link rel="stylesheet" href="../../../../static/css/font-awesome.min.css" media="all">

    <style>
        body {
            /*min-height: 800px;*/
        }

        input[type='text'], input[type='tel'], input[type='password'] {
            -webkit-box-shadow: 0 0 0 1000px white inset;
        }

        .login-left {
            position: absolute;
            left: 0;
            min-width: 500px;
            display: block;
            height: 100%;
            background-color: #ffffff;
            /*min-height: 800px;*/
        }

        .login-left .login-left-top {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 150px;
        }

        .login-left .login-left-top .login-qrcode {
            height: 60px;
            position: relative;
        }

        .login-left .login-left-top .login-qrcode .qrcode {
            width: 200px;
            height: 220px;
            padding: 5px;
            position: absolute;
            right: -205px;
            border: 1px solid #cccccc;
            box-shadow: #cccccc;
            top: 33px;
            background-color: #ffffff;
            display: none;
        }

        .login-left .login-left-top .login-qrcode p {
            text-align: center;
            color: #666666;
        }

        .login-left .login-left-top .login-app-btn {
            width: 60px;
            height: 15px;
            padding: 5px;
            border: 1px solid #0e9aef;
            color: #0e9aef;
            font-size: 11px;
            text-align: center;
            position: absolute;
            right: 20px;
            bottom: 0;
        }

        .login-left .login-left-top .login-app-btn:hover {
            cursor: pointer;
        }

        .login-left .login-left-top .login-logo {
            height: 100px;
            padding-left: 50px;
            display: table-cell;
            vertical-align: middle;
        }

        .login-left .login-left-top .login-logo img {
            width: 80%;
        }

        .login-left .login-left-top .login-system-name {
            height: 100px;
            width: 290px;
            display: table-cell;
            vertical-align: middle;
        }

        .login-left .login-left-top .login-system-name span {
            font-size: 30px;
            color: #666666;
            font-family: "Microsoft YaHei";
        }

        .login-left .login-left-center {
            position: absolute;
            top: 150px;
            left: 0;
            right: 0;
            bottom: 150px;
            padding-left: 50px;
            padding-right: 50px;
        }

        .login-left .login-left-center .login-register {
            width: 100%;
            text-align: center;
            font-size: 28px;
            margin-bottom: 30px;
            color: #666666;
        }

        .login-left .login-left-center .login-register span {
            cursor: pointer;
        }

        .login-left .login-left-center .login-register .active-this {
            color: #108ee9;
        }

        .login-left .login-left-center .login-form {
            display: block;
        }

        .login-left .login-left-center .register-form {
            display: none;
        }

        .login-left .login-left-center .forget-form {
            display: none;
        }

        .layui-input-block {
            margin-left: 0;
        }

        .layui-input-block a {
            color: #108ee9;
        }

        .layui-form-item {
            margin-bottom: 25px;
        }

        /*.layui-input {
            border: none;
            border-bottom: 2px solid #e6e6e6;
        }*/

        /*.layui-input, .layui-btn {
            height: 50px;
            line-height: 50px;
        }*/
        .layui-input{
            width: 362px;
        }

        input[type=checkbox] {
            display: inline-block !important;
            position: absolute;
            top: 4px;
            left: -15px;
        }

        .login-left .login-left-bottom {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 85px;
            padding-left: 50px;
        }

        .login-left .login-left-bottom a {
            display: inline-block;
            width: 100%;
            height: 20px;
            line-height: 5px;
            font-size: 14px;
            color: #f2f2f2;
        }

        .login-left .login-left-bottom a i {
            width: 50px;
        }

        .login-right {
            position: absolute;
            right: 0;
            z-index: -1;
            width: 100%;
            height: 100%;
            background-image: url("../../../../static/images/login_background2.png");
            background-position: 50%;
            background-size: cover;
            background-repeat: no-repeat;
        }

        .login-left .login-left-center .register-form .layui-form-item {
            height: 36px;
        }

        .forget-span {
            font-size: 16px;
            color: #3aaaff;
        }

        .forget-span:hover {
            cursor: auto;
        }
        .user_icon img{
            position: relative;
            width: 25px;
            height: 25px;
            margin-top: -55px;
            /*border: 1px solid #e6e6e6;*/
            background-color: #fff;
            border-radius: 2px;
        }
        .loginname{
            margin-left: 39px
        }
        .password{
            margin-left: 39px
        }
        .login-left-bottom {
            position: absolute;
            z-index: 7;
            /*margin-bottom: 181px;*/
            background-image: url("../../../../static/images/foot_back.png");
            background-size: cover;
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
<div class="container">
    <div class="login-left">
        <div class="login-left-top">
            <%--<div class="login-qrcode">
                <span class="login-app-btn">APP下载</span>
                <div class="qrcode">
                    <img width="200" height="200" src="../../../../static/images/qrCode.png">
                    <p>手机扫描二维码下载</p>
                </div>
            </div>--%>
            <div class="login-logo" style="width: 60px;height: 60px">
                <img src="../../../../static/images/LOGOx3.png">
            </div>
            <div class="login-system-name" >
                <span style="margin-left: 20px">贷款审批辅助平台</span>
            </div>
        </div>
        <div class="login-left-center">
            <div class="login-register">
                <%--<div class="showorhide">
                    <span id="login-btn" class="active-this">登录</span>
                    <span> | </span>
                    <span id="register-btn">注册</span>
                </div>--%>
            </div>
            <form class="layui-form login-form">
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="tel" name="loginname" autocomplete="off" placeholder="请输入手机号"
                               class="layui-input loginname">
                    </div>
                    <span class="user_icon"><img src="../../../../static/images/userX3.png"></span>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="password" name="password" autocomplete="off" placeholder="请输入密码"
                               class="layui-input password">
                    </div>
                    <span class="user_icon"><img src="../../../../static/images/passwordX3.png"></span>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <a class="layui-btn layui-btn-normal" id="login" style="width: 100%; color: #ffffff;"
                           href="javascript:void(0);" onclick="severCheck();">进入</a>
                    </div>
                    <%--<div class="layui-input-block">
                        <a href="javascript:void(0);" id="forget-btn" style="position: absolute; top: 10px; left: 0;">忘记密码？</a>
                        &lt;%&ndash;<a href="javascript:void(0);" style="position: absolute; top: 10px; right: 0;"><input
                                name="protocol" type="checkbox" checked/>协议</a>&ndash;%&gt;
                    </div>--%>
                </div>
            </form>
            <form class="layui-form register-form">
                <div class="layui-form-item">
                    <div class="layui-input-inline" style="width: 274px">
                        <input type="tel" name="reg-username" id="phone" autocomplete="off" placeholder="请输入手机号"
                               class="layui-input reg-username">
                    </div>
                    <div class="layui-input-inline" style="width: 106px">
                        <a class="layui-btn layui-btn-normal" id="sendsms">获取验证码</a>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="text" name="verification-code" id="code" autocomplete="off" placeholder="请输入验证码"
                               class="layui-input verification-code">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="password" name="password" autocomplete="off" id="password" placeholder="请输入密码"
                               class="layui-input reg-password">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="password" name="password2" autocomplete="off" id="again" placeholder="请再次输入密码"
                               class="layui-input reg-password">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="text" name="name" autocomplete="off" id="name" placeholder="请输入姓名"
                               class="layui-input name">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="text" name="email" autocomplete="off" id="email" placeholder="请输入邮箱"
                               class="layui-input email">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <a class="layui-btn layui-btn-normal" style="width: 100%; color: #ffffff;"
                           href="javascript:void(0);" onclick="registerCheck();">注册</a>
                    </div>
                    <%--<div class="layui-input-block">
                        <a href="javascript:void(0);" style="position: absolute; top: 10px; right: 0;"><input
                                name="reg-protocol" type="checkbox" checked/>守护神协议</a>
                    </div>--%>
                </div>
            </form>
            <form class="layui-form forget-form">
                <div class="layui-form-item">
                    <div class="layui-input-inline" style="width: 274px">
                        <input type="tel" name="forget-username" id="forgetPhone" autocomplete="off"
                               placeholder="请输入手机号"
                               class="layui-input forget-username">
                    </div>
                    <div class="layui-input-inline" style="width: 106px">
                        <a class="layui-btn layui-btn-normal" id="forgetSendsms">获取验证码</a>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="text" name="forget-verification-code" id="forgetCode" autocomplete="off"
                               placeholder="请输入验证码"
                               class="layui-input forget-verification-code">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="password" name="forget-password" autocomplete="off" id="forgetPassword"
                               placeholder="请输入密码"
                               class="layui-input forget-password">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="password" name="forget-password2" autocomplete="off" id="forgetAgain"
                               placeholder="请再次输入密码"
                               class="layui-input forget-password">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <a class="layui-btn layui-btn-normal" style="width: 100%; color: #ffffff;"
                           href="javascript:void(0);" onclick="forgetPassword();">提交</a>
                    </div>
                </div>
            </form>
        </div>
        <div class="login-left-bottom">
            <a style="margin-top: 10px;"><i class="fa fa-map-marker fa-fw" style="font-size: 20px;"
                                            aria-hidden="true"></i>天津市贷款审批辅助平台</a>
            <a><i class="fa fa-envelope fa-fw" style="font-size: 16px;"
                  aria-hidden="true"></i>88888888@88.com</a>
            <a style="font-size: 18px;"><i class="fa fa-phone fa-fw" style="font-size: 20px;" aria-hidden="true"></i>(0000)-8888-8888</a>
        </div>
    </div>
    <div class="login-right">
    </div>
</div>

<script type="text/javascript" src="../../../../static/layer/layui.js"></script>
<script type="text/javascript">
    var $, layer;
    var codeSwitch = false;
    layui.use(['jquery', 'layer'], function () {
        $ = layui.jquery
            , layer = layui.layer;

        $(".login-app-btn").hover(function () {
            $(".qrcode").show();
        }, function () {
            $(".qrcode").hide();
        });

        $("input").val("");
        $("#login-btn").click(function () {
            $(this).addClass("active-this");
            $("#register-btn").removeClass("active-this");
            $(".login-form").fadeIn(200);
            $(".register-form").fadeOut(200);
        });
        $("#register-btn").click(function () {
            $(this).addClass("active-this");
            $("#login-btn").removeClass("active-this");
            $(".register-form").fadeIn(200);
            $(".login-form").fadeOut(200);
        });
        $("#forget-btn").click(function () {
            $(".forget-form").fadeIn(200);
            $(".register-form").fadeOut(200);
            $(".login-form").fadeOut(200);
            $(".showorhide").hide();
            $(".login-register").append("<div class='hideorshow'><span style='position: absolute; left: 60px; top: 5px; color: #999999;' onclick='goLogin();'><i class=\"fa fa-arrow-left\" aria-hidden=\"true\"></i></span><span class='forget-span'>找回密码</span></div>");
        });
        $(document).keyup(function (event) {
            if (event.keyCode == 13) {
                $("#login").trigger("click");
            }
        });

        $("#password").focusout(function () {
            var password = $("#password").val();
            if (password.length < 6) {
                layer.tips('密码长度应为6~20个字符', '#password', {tips: 2});
                $("#password").focus();
            } else {
                if (!password.match(("^(?![0-9]+$)(?![a-zA-Z]+$)(?!([^(0-9a-zA-Z)]|[\(\)])+$)([^(0-9a-zA-Z)]|[\(\)]|[a-zA-Z]|[0-9]){6,}$"))) {
                    layer.tips('字母、数字、以及标点符号至少包含两种', '#password', {tips: 2});
                    $("#password").focus();
                }
            }
        });
        $("#forgetPassword").focusout(function () {
            var password = $("#forgetPassword").val();
            if (password.length < 6) {
                layer.tips('密码长度应为6~20个字符', '#forgetPassword', {tips: 2});
                $("#forgetPassword").focus();
            } else {
                if (!password.match(("^(?![0-9]+$)(?![a-zA-Z]+$)(?!([^(0-9a-zA-Z)]|[\(\)])+$)([^(0-9a-zA-Z)]|[\(\)]|[a-zA-Z]|[0-9]){6,}$"))) {
                    layer.tips('字母、数字、以及标点符号至少包含两种', '#forgetPassword', {tips: 2});
                    $("#forgetPassword").focus();
                }
            }
        });
        $("#email").focusout(function () {
            var email = $("#email").val();
            if (!email.match(("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"))) {
                layer.tips('邮箱格式不正确', '#email', {tips: 2});
                $("#email").focus();
            }
        });
        $("#phone").focusout(function () {
            var userName = $("#phone").val();
            $.ajax({
                type: "post",
                url: "/user/findbyusername",
                async: true,
                data: {
                    userName: userName
                },
                success: function (rs) {
                    if (rs.errcode === "01") {
                        layer.tips(rs.errmsg, '#phone', {tips: 2});
                        $("#phone").focus();
                    } else {
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                }
            });
        });
        $("#forgetPhone").focusout(function () {
            var userName = $("#forgetPhone").val();
            $.ajax({
                type: "post",
                url: "/user/findbyusername",
                async: true,
                data: {
                    userName: userName
                },
                success: function (rs) {
                    if (rs.errcode === "01") {

                    } else {
                        layer.tips("账号未注册", '#forgetPhone', {tips: 2});
                        $("#forgetPhone").focus();
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                }
            });
        });

        //验证码的发送
        $('#sendsms').click(function () {
            if (!codeSwitch) {
                var phone = $("#phone").val();
                if (phone == "") {
                    layer.tips('手机号不能为空', '#phone', {tips: 2});
                    $("#phone").focus();
                    return false;
                }
                $.ajax({
                    type: "post",
                    url: "/user/sendsms",
                    async: true,
                    data: {
                        phone: phone
                    },
                    success: function (rs) {
                        if (rs.errcode === "01") {
                            layer.tips(rs.errmsg, '#phone', {tips: 2});
                            $("#phone").focus();
                        } else {
                            codeSwitch = true;
                            var intTime = parseInt(60);
                            $('#sendsms').text(intTime + 's后可重新发送');
                            var int = window.setInterval(function () {
                                --intTime;
                                if (intTime != 0) {
                                    $('#sendsms').text(intTime + 's后可重新发送');
                                } else {
                                    $('#sendsms').text('获取验证码');
                                    window.clearInterval(int);
                                    codeSwitch = false;
                                }
                            }, 1000);
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                    }
                });
            }
        });
        //验证码的发送
        $('#forgetSendsms').click(function () {
            if (!codeSwitch) {
                var phone = $("#forgetPhone").val();
                if (phone == "") {
                    layer.tips('手机号不能为空', '#forgetPhone', {tips: 2});
                    $("#forgetPhone").focus();
                    return false;
                }
                $.ajax({
                    type: "post",
                    url: "/user/sendsms",
                    async: true,
                    data: {
                        phone: phone
                    },
                    success: function (rs) {
                        if (rs.errcode === "01") {
                            layer.tips(rs.errmsg, '#forgetPhone', {tips: 2});
                            $("#forgetPhone").focus();
                        } else {
                            codeSwitch = true;
                            var intTime = parseInt(60);
                            $('#forgetSendsms').text(intTime + 's后可重新发送');
                            var int = window.setInterval(function () {
                                --intTime;
                                if (intTime != 0) {
                                    $('#forgetSendsms').text(intTime + 's后可重新发送');
                                } else {
                                    $('#forgetSendsms').text('获取验证码');
                                    window.clearInterval(int);
                                    codeSwitch = false;
                                }
                            }, 1000);
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                    }
                });
            }
        });
    });

    function severCheck() {
        if (check()) {
            var loginname = $("input[name='loginname']").val();
            var password = $("input[name='password']").val();
            var code = "" + loginname + "," + password + "" + ",";
            $.ajax({
                type: "POST",
                url: 'login_login',
                data: {KEYDATA: code, tm: new Date().getTime(), type: 'shs'},
                dataType: 'json',
                cache: false,
                success: function (data) {
                    // console.log(data);
                    layer.closeAll('loading');
                    if ("success" == data.result) {
                        window.location.href = "main/index";
                    } else if ("usererror" == data.result) {
                        layer.tips('用户名或密码有误', '.loginname');
                        $("#loginname").focus();
                    } else {
                        layer.tips('缺少参数', '.loginname');
                        $("#loginname").focus();
                    }
                }
            });
        }
    }

    function goLogin() {
        $(".login-form").fadeIn(200);
        $(".forget-form").fadeOut(200);
        $(".register-form").fadeOut(200);
        $(".showorhide").show();
        $(".hideorshow").remove();
    }

    //客户端校验
    function check() {

        if ($("input[name='loginname']").val() == "") {
            layer.tips('用户名不得为空', '.loginname');
            $("#loginname").focus();
            return false;
        } else {
            $("input[name='loginname']").val($.trim($("input[name='loginname']").val()));
        }

        if ($("input[name='password']").val() == "") {
            layer.tips('密码不得为空', '.password');
            $("input[name='password']").focus();
            return false;
        }

        /*if ($("input[name='protocol']").is(":checked") == false) {
            layer.alert('需同意贷款协议');
            return false;
        }*/
        layer.load();
        return true;
    }

    function registerCheck() {
        var phone = $("#phone").val();
        var code = $("#code").val();
        var password = $("#password").val();
        var again = $("#again").val();
        var name = $("#name").val();
        var email = $("#email").val();
        if (phone == "") {
            layer.tips('手机号不能为空', '#phone', {tips: 2});
            $("#phone").focus();
            return false;
        }
        if (code == "") {
            layer.tips('验证码不能为空', '#code', {tips: 2});
            $("#code").focus();
            return false;
        }
        if (password == "") {
            layer.tips('密码不能为空', '#password', {tips: 2});
            $("#password").focus();
            return false;
        }
        if (again == "") {
            layer.tips('确认密码不能为空', '#again', {tips: 2});
            $("#again").focus();
            return false;
        }
        if (password != again) {
            layer.tips('两次输入密码不一致', '#again', {tips: 2});
            $("#again").focus();
            return false;
        }
        if (name == "") {
            layer.tips('姓名不能为空', '#name', {tips: 2});
            $("#name").focus();
            return false;
        }
        if (!email.match(("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"))) {
            layer.tips('邮箱格式不正确', '#email', {tips: 2});
            $("#email").focus();
            return false;
        }
       /* //邮箱校验
        var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
        var obj = $("#email"); //要验证的对象
        console.log(obj)
        if(obj.value === ""){ //输入不能为空
            layer.tips('输入不能为空', '#again', {tips: 2});
            return false;
        }else if(!reg.test(obj.value)){ //正则验证不通过，格式不对
            layer.tips('邮箱格式错误', '#again', {tips: 2});
            return false;
        }else{
            return true;
        }*/
        $.ajax({
            type: "post",
            url: "/user/register",
            async: true,
            data: {
                phone: phone,
                code: code,
                password: password,
                name: name,
                email: email,
                userType: '95bb91515192430bb7a6b5d0a0876542'
            },
            success: function (rs) {
                if (rs.errcode === "00") {
                    layer.msg(rs.errmsg, {offset: '150px'});
                    // window.location.href="/login_toLogin";
                    $("#login-btn").click();
                    $("input[name='loginname']").val(phone);
                    $("input[name='reg-username']").val("");
                    $("input[name='verification-code']").val("");
                    $("input[name='password']").val("");
                    $("input[name='password2']").val("");
                    $("input[name='name']").val("");
                    $("input[name='email']").val("");
                } else {
                    layer.msg(rs.errmsg, {offset: '150px'});
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
            }
        });
    }

    function forgetPassword() {
        var phone = $("#forgetPhone").val();
        var code = $("#forgetCode").val();
        var password = $("#forgetPassword").val();
        var again = $("#forgetAgain").val();
        if (phone == "") {
            layer.tips('手机号不能为空', '#forgetPhone', {tips: 2});
            $("#forgetPhone").focus();
            return false;
        }
        if (code == "") {
            layer.tips('验证码不能为空', '#forgetCode', {tips: 2});
            $("#forgetCode").focus();
            return false;
        }
        if (password == "") {
            layer.tips('密码不能为空', '#forgetPassword', {tips: 2});
            $("#forgetPassword").focus();
            return false;
        }
        if (again == "") {
            layer.tips('确认密码不能为空', '#forgetAgain', {tips: 2});
            $("#forgetAgain").focus();
            return false;
        }
        if (password != again) {
            layer.tips('两次输入密码不一致', '#forgetAgain', {tips: 2});
            $("#forgetAgain").focus();
            return false;
        }
        $.ajax({
            type: "post",
            url: "/user/forgetPassword",
            async: true,
            data: {
                phone: phone,
                code: code,
                password: password
            },
            success: function (rs) {
                if (rs.errcode === "00") {
                    layer.msg(rs.errmsg, {offset: '150px'});
                    // window.location.href="/login_toLogin";
                    goLogin();
                    $("#login-btn").click();
                    $("input[name='loginname']").val(phone);
                    $("input[name='reg-username']").val("");
                    $("input[name='verification-code']").val("");
                    $("input[name='password']").val("");
                    $("input[name='password2']").val("");
                    $("input[name='name']").val("");
                    $("input[name='email']").val("");
                } else {
                    layer.msg(rs.errmsg, {offset: '150px'});
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
            }
        });
    }
</script>
<script>
    //TOCMAT重启之后 点击左侧列表跳转登录首页
    if (window != top) {
        top.location.href = window.location.host;
    }
</script>
</body>


</html>